<template>
  <div class="header-nav" :class="{ isFixed: isFixed }"
    :style="{ paddingTop: `${paddingTop}px`, backgroundColor: `${isTransparent ? 'transparent' : backgroundColor}` }">
    <div class="header-nav-img" @click="$emit('back')"><img :src="iconBack" alt="" /></div>
    <div class="header-nav-title" :class="color">
      <template v-if="!$scopedSlots.title" >{{ title }}</template>
      <slot v-else name="title"></slot>
    </div>

    <div v-if="$scopedSlots.right" class="header-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
import { isApp, isAndroid, getREM } from '@@/common/plugins/common.js';

export default {
  name: "headerTop",
  props: {
    isFixed: {
      type: Boolean,
      default: true
    },
    isTransparent: {
      type: Boolean,
      default: false
    },
    backgroundColor: {
      type: String,
      default: () => '#fff'
    },
    title: {
      type: String,
      default: () => ''
    },
    color: {
      type: String,
      default: () => 'black' //white：白；black：黑
    }
  },
  data() {
    return {
      paddingTop: 0,
      iconBack: ''
    }
  },
  mounted() {
    this.iconBack = require(`./icon-${this.color}.png`)
    if (isApp()) {
      setTimeout(() => {
        window.location.href = 'https://hxsapp_header_action?id=1'
      }, 200);
      setTimeout(() => {
        this.adapter();
      }, 500);
    } else {
      this.adapter();
    }
  },
  destroyed() {
    if (isApp()) {
      window.location.href = 'https://hxsapp_header_action?id=0'
    }
  },
  methods: {
    async adapter() {
      let heght = await this.getAdapterHeight();
      this.paddingTop =getREM(heght + 36)
      this.$emit('paddingTop', this.paddingTop)
    },
    getAdapterHeight() {
      return new Promise((resolve) => {
        if (!isAndroid() && isApp()) {
          window.adapterHeaderHeight = (data) => {
            let dapterHeight = data || 20;
            resolve(dapterHeight)
          };
          window.location.href = 'https://hxsapp_adapted_header?func=adapterHeaderHeight';
        } else {
          resolve(0)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.visibility {
  visibility: hidden;
}

.header-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 88;
  height: 88px;
  background: white;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;

  .header-right {
    position: absolute;
    right: 37px;
  }

  &.isFixed {
    position: fixed;
  }

  &.isTransparent {
    background-color: transparent;
  }

  .header-nav-img {
    width: 40px;
    height: 40px;

    img {
      width: 100%;
      height: 100%;
    }

    position: absolute;
    left: 28px;
  }

  .header-nav-title {
    font-weight: bold;
    color: #1d1d1d;
    font-size: 34px;
    flex: 1;
    text-align: center;

    &.white {
      color: #fff;
    }
  }

  .header-nav-edit {
    text-align: right;
    width: 80px;
    color: #fff;
    font-size: 34px;
  }
}
</style>
